<template>
  <div class="rightbuttom" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.querySelector(".rightbuttom");
    var myChart = echarts.init(chartDom);
    
    let option = { 
       
      title: {
        text: "境外输入病情top10省份",
        textAlign: "center", //  居中对齐
        left: "50%", //  标题水平位置
        textStyle: {
          fontSize: "10",
          color: "#ffffff",
          // 字体加粗
          fontWeight: "normal",
        },  
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        left: "center",
        top: "bottom",
        data: [
          "rose1",
          "rose2",
          "rose3",
          "rose4",
          "rose5",
          "rose6",
          "rose7",
          "rose8",
        ],
      },

      series: [
        {
          name: "地区分布",
          type: "pie",
          radius: [5, 50],
          roseType: "area",
          itemStyle: { 
          },
          data: [
            { value: 34, name: "上海" },
            { value: 32, name: "广东" },
            { value: 30, name: "黑龙江" },
            { value: 28, name: "四川" },
            { value: 26, name: "陕西" },
            { value: 24, name: "内蒙古" },
            { value: 22, name: "福建" },
            { value: 20, name: "北京" },
            { value: 18, name: "天津" },
            { value: 16, name: "山西" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
</style>